<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="任务名称" />
      <el-table-column prop="tpl_name" label="模板名称" />
      <el-table-column label="跳转方式">
        <template slot-scope="scope">
          <span v-if="scope.row.jump_type == 0">不跳转</span>
          <span v-if="scope.row.jump_type == 1">网页</span>
          <span v-if="scope.row.jump_type == 2">小程序</span>
        </template>
      </el-table-column>
      <el-table-column label="关注范围(群发对象)" width="230">
        <template slot-scope="scope">
          {{ scope.row.date_range[0] }} ~ {{ scope.row.date_range[0] }}
        </template>
      </el-table-column>
      <el-table-column label="发送结果">
        <template slot-scope="scope">
          {{ scope.row.success_num }}成功{{ scope.row.failed_num }}失败
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="发送时间" />
      <el-table-column prop="username" label="操作人" />
      <el-table-column prop="oprate" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="copyMass(scope.row)">复制群发</el-button>
          <el-button type="text" size="medium" @click="deleteMass(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div ref="qs-table-pagination" class="qs-table-pagination">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { getMassList, massCopy, massDel } from '@/api/massSMS'
export default {
  data() {
    return {
      loading: false,
      page: 1,
      pagesize: 10,
      total: 0,
      tableData: []
    }
  },
  created() {
    // this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.loading = true
      const params = {
        page: this.page,
        page_size: this.pagesize
      }
      getMassList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.items
          this.total = res.data.total
          this.tableData.forEach(item => {
            item.add_time = parseTime(item.add_time * 1000, '{y}-{m}-{d} {h}:{i}')
          })
          this.loading = false
        }
      })
        .catch(() => {})
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.initData()
    },
    copyMass(row) {
      const params = { mass_id: row.id }
      massCopy(params).then(res => {
        if (res.code == 200) {
          const params = res.data
          params.title = row.title
          this.$emit('btn-click', params)
        }
      })
        .catch(() => {})
    },
    deleteMass(row) {
      this.$confirm('确定删除该条群发记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          massDel({ mass_id: row.id }).then(res => {
            if (res.code == 200) {
              this.initData()
              this.$message.success(res.message)
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.qs-table-pagination {
  text-align: right;
  padding-top: 15px;
}
</style>
